import { Input, Select, Space, Button, Table, Image, Switch } from 'antd';
import React, { useEffect } from 'react';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { useState } from 'react';
import { getCategoryList, getProList, getSearchProList } from '../../api/pro';
import { useHeight } from '../useHeight';

import ExportJsonExcel from 'js-export-excel' // ++++++++++++++++++++++++

type ExportProps = {}

interface DataType {
  proid: string
  proname: string
  img1: string
  originprice: number
  discount: number
  sales: number
  stock: number
  category: string
  brand: string
  issale: number
  isrecommend: number
  isseckill: number
}
export const Export = (props: ExportProps) => { 
  const [proList, setProList] = useState<DataType[]>([]) // 表格数
  const [categoryList, setCategoryList] = useState<string[]>([]) // 分类数据

  const [category, setCategory] = useState<string>('') //分类搜索条件
  const [search, setSearch] = useState<string>('') // 关键词搜索

  const [current, setCurrent] = useState<number>(1) // 页码
  const [pageSize, setPageSize] = useState<number>(10) // 每页显示个数

  const height = useHeight()

  const getProListData = () => { // 请求表格数据
    getProList().then(res => setProList(res.data.data))
  }

  const getCategoryListData = () => { // 请求分类的数据
    getCategoryList().then(res => {
      console.log(res.data.data)
      setCategoryList(res.data.data)
    })
  }

  useEffect(() => {
    getProListData()
    getCategoryListData()
  }, [])

  return (
  <>
    <Space direction='vertical' style = {{ width: '100%'}}>
      <Space>
        <Select value={ category } style={{ width: 120 }} onChange = { value => {
          console.log(value)
          setCategory(value)
        }}>
          <Select.Option key='all' value="">全部</Select.Option>
          {
            categoryList && categoryList.map(item => {
              return (
                <Select.Option key={item} value={item}>{item}</Select.Option>
              )
            })
          }
        </Select>
        <Input placeholder='请输入关键词'  value={ search } onChange = { e => setSearch(e.target.value) }/>
        <Button type='primary' onClick={ () => {
          getSearchProList({
            category, search
          }).then(res => {
            setProList(res.data.data)
          })
        }}>搜索</Button>
        <Button type='primary' onClick={ () => {
          const arr = JSON.parse(JSON.stringify(proList))
          arr.sort((a: DataType, b: DataType) =>  a.originprice - b.originprice)
          setProList(arr)
        }}>价格升序</Button>
        <Button type='primary' onClick={ () => {
          let option: {
            fileName: string
            datas: {
              sheetData: DataType[],
              sheetName: string,
              sheetFilter: string[],
              sheetHeader: string[],
              columnWidths: number[]
            }[]
          };
          option = {
            fileName: "产品列表", // 导出的文件的名称
            datas: [
              {
                sheetData: proList, // 表格数据
                sheetName: "产品列表1", // excel表格中表格的名字
                sheetFilter: ["proname", "img1",  "category"], // 需要导出的数据的字段
                sheetHeader: ["产品名称", "图片", "分类"], // 表头的值
                columnWidths: [20, 20],
              },
              {
                sheetData: proList, // 表格数据
                sheetName: "产品列表2", // excel表格中表格的名字
                sheetFilter: ["proname", "img1",  "category", 'originprice'], // 需要导出的数据的字段
                sheetHeader: ["产品名称", "图片", "分类", '价格'], // 表头的值
                columnWidths: [20, 20],
              },
            ]
          }
          
          var toExcel = new ExportJsonExcel(option); //new
          toExcel.saveExcel(); //保存
        }}>导出数据</Button>
      </Space>
      <Table 
        dataSource={ proList }
        rowKey="proid"
        bordered
        scroll={{ y: height }}
        pagination={{
          current,
          pageSize,
          onChange(page, pageSize) {
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}
      >
        <Table.Column
          title="序号"
          render={(text, record, index) => { return <span>{ (current - 1) * pageSize + index + 1 }</span>}}
        ></Table.Column>
        <Table.Column
          title="产品分类"
          dataIndex="category"
        ></Table.Column>
        <Table.Column
          title="产品品牌"
          dataIndex="brand"
        ></Table.Column>
        <Table.Column
          title="产品名称"
          dataIndex="proname"
        ></Table.Column>
        <Table.Column
          title="图片"
          dataIndex="img1"
          render={ (text) => {return <Image src={text} width={80} height={80} /> }}
        ></Table.Column>
        <Table.Column
          title="产品价格"
          dataIndex="originprice"
          sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
        ></Table.Column>
        <Table.Column
          title="产品折扣"
          dataIndex="discount"
          sorter={(a: DataType, b: DataType) => a.discount - b.discount}
        ></Table.Column>
        <Table.Column
          title="产品销量"
          dataIndex="sales"
          sorter={(a: DataType, b: DataType) => a.sales - b.sales}
        ></Table.Column>
        <Table.Column
          title="产品库存"
          dataIndex="stock"
          sorter={(a: DataType, b: DataType) => a.stock - b.stock}
        ></Table.Column>
        <Table.Column
          title="是否上架"
          dataIndex="issale"
          render={ (text) => {return <Switch checked = { text === 1 } /> }}
        ></Table.Column>
        <Table.Column
          title="是否推荐"
          dataIndex="isrecommend"
          render={ (text) => {return <Switch checked = { text === 1 } /> }}
        ></Table.Column>
        <Table.Column
          title="是否秒杀"
          dataIndex="isseckill"
          render={ (text) => {return <Switch checked = { text === 1 } /> }}
        ></Table.Column>
         <Table.Column
          title="操作"
          render={ (text, record: DataType, index) => {return (
            <Space>
              <Button type="primary" shape="circle" icon={<EditOutlined />} />
              <Button danger shape="circle" icon={<DeleteOutlined />} />
            </Space>
          ) }}
        ></Table.Column>
      </Table>
    </Space>
  </>
)};